<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>管理后台</title>
		{:token_meta()}
		
		<style>
			.layui-form{
				padding-top: 20px;
			}
			.addform{
				min-width: 500px;
				height: auto;
			}
			.layui-input-inline{
				width: 65% !important;
			}
		</style>
	</head>
	<body>
		<div class="layui-container">
			<div class="layui-row">
				<div class="layui-card" style="margin-top: 100px;box-shadow: 0 0 20px #999;">
				  <div class="layui-card-header layui-bg-cyan">
					  列表面板
					  <a href="javascript:;" data-method="addList" class="layui-btn add_list">添加</a>
				  </div>
				  <div class="layui-card-body">
					<!-- <table id="get_list" lay-filter="list2"></table> -->
					<table id="get_list" class="layui-table" lay-data="{ url:'/getlist', page:true, id:'id'}" lay-filter="demo">
					  <thead>
					    <tr>
					      <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>
					      <th lay-data="{field:'nickname'}">专属人</th>
					      
					      <th lay-data="{field:'ename' }">下方名称</th>
						  <th lay-data="{field:'from_url' }">专属域名</th>
						  <th lay-data="{field:'view', sort: true}">访问统计</th>
					      <th lay-data="{field:'img', templet: '#ewm'}">二维码</th>
						  
					      <th lay-data="{field:'status', width:80, sort: true}">状态</th>
					      <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}"></th>
					    </tr>
					  </thead>
					</table>
				  </div>
				</div>
			</div>
		</div>
		
		
	</body>
	<div class="layui-hide">
		<div id="addlist">
			<form class="layui-form addform">
				<input type="hidden" id="setid" name="id" value="" />
			  <div class="layui-form-item ewm_show" style="display: none;">
			    <label class="layui-form-label">二维码</label>
			    <div class="layui-input-inline">
			      <img id="ewm_display"/>
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">专属人</label>
			    <div class="layui-input-inline">
			      <input id="nickname" type="text" name="nickname" required lay-verify="required" maxlength="50" placeholder="请输入专属人" autocomplete="off" class="layui-input">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">二维码下方名称</label>
			    <div class="layui-input-inline">
			      <input id="ename" type="text" name="ename" lay-verify="" maxlength="50" placeholder="请输入二维码下方名称" autocomplete="off" class="layui-input">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">专属域名</label>
			    <div class="layui-input-inline">
			      <input id="from_url" type="text" name="from_url" required  lay-verify="required" maxlength="100" placeholder="请输入专属域名(xxx.abc.com)" autocomplete="off" class="layui-input">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">跳转链接</label>
			    <div class="layui-input-inline">
			      <input id="to_url" type="text" name="to_url" required  lay-verify="required" maxlength="100" placeholder="请输入跳转链接(https://abc.com/?ac=1234)" autocomplete="off" class="layui-input">
			    </div>
			  </div>
			   <div class="layui-form-item">
			      <label class="layui-form-label">启用</label>
			      <div class="layui-input-inline">
			        <input id="status" type="checkbox" name="status" lay-skin="switch" checked>
			      </div>
			    </div>
			   <div class="layui-form-item">
			      <div class="layui-input-block">
			        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
			        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			      </div>
			    </div>
			</form>
		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.9.1/layui.min.js" integrity="sha512-AJhx7BLdwD+d6iPxiduy2xg8riWovPMLyvSOT4jaBI5u60HsNACg+A2HjDYCX5JFq9Cj+2C7ECi89iwRpoN9kg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.9.1/css/layui.min.css" integrity="sha512-U9QimC62jnN+/YHdSADxldGEKry4HPrLNTAAyzYrvEbGqzWQbnSkfF40E7rPYTD+Kw98GzyDU3u+cnyWwEt+dA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<script type="text/html" id="barDemo">
	  <!-- <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a> -->
	  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script type="text/html" id="ewm">
		<img class="imgView" src="{{d.img}}" style="width:auto" lay-event="img"/>
	</script>
	<script>
		layui.use(['layer','jquery','form'], function(){ 
			var $ = layui.jquery, layer = layui.layer,form=layui.form,table = layui.table;
			
			var addOpen, editOpen;
			
			//自定义域名验证规则
			form.verify({
			    domain: function(value){
			      if(value === ''){
			        return '域名不能为空';  
			      }
			      if(!/^[\w\-_]+\.[\w\-_]+$/.test(value)){
			        return '域名格式不正确';
			      }
			    },
				
			});
			
			$('.add_list').on('click', function(){
				setVal('')
				addOpen=layer.open({
					type:1,
					shade: 0.8,
					shadeClose:true,
					title:'添加跳转链接',
					content:$('#addlist').html()
				});
			});
			
			form.on('submit(formDemo)', function(data){
				event.preventDefault(); 
				data.field.status=data.field.status=='on'?1:0;

				$.ajax({
				  type: 'post', // 使用POST方法提交数据
				  url: '/gl_add', // 指定提交的URL
				  data: data.field, // 发送的数据
				  headers:{
			        'X-CSRF-TOKEN': getToken()
				  },
				  success: function(response) {
					// 在这里处理服务器响应
					console.log('表单提交成功！');
					console.log(response);
					var icontype=response.code==200?1:2;
					layer.alert(response.msg,{icon: icontype})
					
					if (response.code==200) {
						layer.close(addOpen)
						if(!!data.field.id){
							layer.close(editOpen)
							
						}
						location.reload()
					}
					
				  },
				  error: function(e) {
					// 处理错误情况
					console.log('表单提交失败！',e);
					layer.alert('表单提交失败',{icon: 2})
				  }
				});
			    return false;
			});
			
			
			//监听工具条
			  table.on('tool(demo)', function(obj){
			    var data = obj.data;
				switch(obj.event){
				  case 'detail':
					layer.open({
						type:1,
						title:false,
						shadeClose:true,
						content:$('#addlist').html()
					})
					setVal(data,'edit')
				  break;
				  case 'del':
				    layer.confirm('真的删除行么', function(index){
						$.ajax({
						  type: 'get', // 使用POST方法提交数据
						  url: '/ac?ac=del&ids='+data.id, // 指定提交的URL
						  success: function(response) {
							console.log(response);
							var icontype=response.code==200?1:2;
							layer.alert(response.msg,{icon: icontype})
						  },
						  error: function(e) {
								// 处理错误情况
								console.log('表单提交失败！',e);
								layer.alert('删除失败',{icon: 2})
						  },
						});
						obj.del();
						layer.close(index);
				    });
				  break;
				  case 'edit':
				    setVal(data,'edit')
				    
				    editOpen=layer.open({
						type:1,
				    	title:false,
				    	shadeClose:true,
				    	content:$('#addlist').html()
				    })
				  break;
				  case 'img':
					// 放大图片
					imgBig(data.img)
				  break;
				};
				
				
			  });

			function getToken() {
			  return $('meta[name="csrf-token"]').attr('content');
			}
			// 设置与还原值
			function setVal(data,type='add'){
				switch (type){
					case 'edit':
						var status=data.status==1?'on':'';
						$('.ewm_show').css({'display':'block'});
						$('#ewm_display').attr('src',data.img);
						$('#nickname').attr('value',data.nickname);
						$('#ename').attr('value',data.ename);
						$('#from_url').attr('value',data.from_url);
						$('#to_url').attr('value',data.to_url);
						$('#status').attr('value',status);
						$('#setid').attr('value',data.id);
						break;
					default:
						$('#setid').attr('value','');
						$('.ewm_show').css({'display':'none'});
						$('#ewm_display').attr('src','');
						$('#nickname').attr('value','');
						$('#ename').attr('value','');
						$('#from_url').attr('value','');
						$('#to_url').attr('value','');
						$('#status').attr('value','');
						$('#setid').attr('value','');
						break;
				}
			}
			
			// 放大图片
			function imgBig(img){
				layer.open({
					title:false,
					shadeClose:true,
					content:'<img src="'+img+'">'
				})
			}
		});
	</script>
</html>